import React from 'react'
import Simditor from "simditor";
import $ from "jquery";
import {INTERFACE_CORE_URL} from '../../api/config';
/* import {ENV} from '../common/url'; */

require("simditor/styles/simditor.css");

/**
 * 取值 let goods_desc = $(".detailContainer").find(".simditor-body").html();
 */
let editorPropChange = true;

class MobileEditor extends React.Component {
    
    componentDidMount = () => {
        this.initEditor();
        // $(".font-color.font-color-default").removeClass("font-color-default").addClass("font-color-8");
    };

    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if (this.props.value != nextProps.value && !nextProps.value) {
            editorPropChange = false;
            this.editor.setValue(nextProps.value);
            editorPropChange = true;
        }
    }

    initEditor = () => {
        let config = {
            placeholder: this.props.placeholder,
            defaultImage: 'images/image.png',
            params: {},
            tabIndent: true,
            toolbar: [
                'title',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'fontScale',
                'color',
                'link',
                'hr',
                'image',
                'indent',
                'outdent',
                'alignment',
            ],
            upload: {
                url: INTERFACE_CORE_URL + '/upload', //文件上传的接口地址
                params: {
                    appid: 'ENV.APP_ID',
                    secret: 'ENV.SECRET',
                }, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件',
            },
            toolbarFloat: true,
            toolbarFloatOffset: 0,
            toolbarHidden: false,
            pasteImage: false,
            cleanPaste: false,
            textarea: $(this.refs.textarea)
        };

        this.editor = new Simditor(config);// 初始化编辑器
        this.editor.uploader.on('uploadsuccess',function(e, file, result){
            try {
                console.log(file);
                let $img,$mask,msg;
                if(!file.inline){
                    return;
                }
                $img = file.img;
                $img.removeData('file');
                $img.removeClass('uploading');
                $mask = $img.data('mask');
                if($mask){
                    $mask.remove();
                }
                $img.removeData('mask');
                console.log(result);
                if(result.code != 0){
                    $img.attr('str',_this.defaultImage);
                } else {
                    $img.attr('src',result.data.fullPath);
                }
            } catch (error) {
                console.log(error);
            }
        });
        this.editor.setValue(this.props.value);

        //监听改变
        this.editor.on("valuechanged", (e, src) => {
            if(editorPropChange)this.props.onChange(this.getValue());
        });

        //更改图片上传类型
        $(".simditor input[type='file']").attr('accept', 'image/jpg,image/jpeg,image/png,image/bmp');
    };

    // componentWillReceiveProps(nextProps){
    //     this.editor.setValue(nextProps.value);
    // };

    getValue = () => {
        let selectName = `#${this.props.id} .simditor`;
        let html = $(selectName).find(".simditor-body").html();
        return html;
    };

    render() {
        return (
            <div name="_mobile_editor">
                <textarea id={this.props.id} ref="textarea" placeholder="请输入内容"/>
            </div>
        );
    }
}

export default MobileEditor;